<template>
<div>
	<h2 class="intro-title">Badge 标记</h2>
	<p class="intro-content">出现在按钮、图标旁的数字或状态标记。</p>

	<demo01></demo01>

	<h3 class="base-title">Attributes</h3>
	<table class="attri-table">
		<thead>
			<tr>
				<th>参数</th>
				<th>说明</th>
				<th>类型</th>
				<th>可选值</th>
				<th>默认值</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for='item in list1' :key='item.val1'>
				<td>{{item.val1}}</td>
				<td>{{item.val2}}</td>
				<td>{{item.val3}}</td>
				<td>{{item.val4}}</td>
				<td>{{item.val5}}</td>
			</tr>
		</tbody>
	</table>
</div>
</template>

<script>
import demo01 from './demo01.vue'

const list1 = [{
	val1: 'value',
	val2: '显示值',
	val3: 'string, number',
	val4: '--',
	val5: '--',
},{
	val1: 'type',
	val2: '类型',
	val3: 'string',
	val4: 'primary / success / warning / danger / info',
	val5: '--',
}].sort((a, b) => {
	return a.val1.localeCompare(b.val1);
});

export default {
	components: {
		'demo01': demo01,
	},
	data () {
		return {
			list1: list1,
		};
	},
}
</script>

<style scoped>
</style>
